<template>
  <el-form-item v-if="!quotations.length" label="引文(可选)">
    <span class="no-quotation">无</span>
    <add-quotation-component v-model="quotations" style="display: inline-block;"/>
  </el-form-item>
  <el-form-item v-else class="infinite-list" :label="'引文(可选)'+(doc?.doi?'【对引文的修改会实时更新】':'')">
    <div class="infinite-list-item" v-for="(it,i) in quotations" :key="i" style="width: 100%">
      <div style="width: 100%;display: flex">
        <span class="one-quotation-desc">
          <el-text truncated class="quotation-detail" :style="{color:it.documentId>0?'green':'',fontWeight: it.documentId>0?'bold':''}">
            《{{ it.title }}》【编号：{{ it.doi }}，作者：{{ it.authorsName }}】
          </el-text>
        </span>
        <span class="two-button">
            <el-button size="small" @click="showQuotationDetail(i)">详情</el-button>
            <el-button size="small" type="info" @click="delQuotation(i)">删除</el-button>
        </span>
      </div>
    </div>
    <div style="margin-left: auto">
      <add-quotation-component v-model="quotations"/>
    </div>
  </el-form-item>
  <quotation-show-dialog-component/>
  <hr style="margin-top: 5px;">

</template>

<script setup>
import AddQuotationComponent from "@/components/add/document/quotation/AddQuotationComponent.vue";
import {provide, ref, defineModel, inject} from "vue";
import {ElMessage} from "element-plus";
import QuotationShowDialogComponent from "@/components/add/document/quotation/QuotationShowDialogComponent.vue";
import {delDocQuoApi} from "@/apis/quotation";

const quotations = defineModel()
const quotationDetail = ref({})
provide('showQuotation', quotationDetail)
const showQuotationDetail = (j) => {
  const len = quotations.value.length
  if (0 <= j && j < len) {
    quotationDetail.value = quotations.value[j];
    showQuotationDesc()
  } else {
    ElMessage.error('找不到该引文')
  }
}

const doc = inject('doc')

const delQuotation = (j) => {
  const len = quotations.value.length
  if (0 <= j && j < len && confirm('确定要删除引文《' + quotations.value[j].title + '》?')) {
    if (doc?.value?.id) {
      delDocQuoApi(doc.value.id, quotations.value[j].id)
    }
    quotations.value.splice(j, 1);
  }
}

const quotationShowDialog = ref(false)
provide('quotationShowDialog', quotationShowDialog)
const showQuotationDesc = () => {
  quotationShowDialog.value = true
}

</script>

<style scoped>
.two-button {
  display: flex;
  align-items: center;
}

.one-quotation-desc {
  width: 82%;
  max-width: 82%;
  text-align: left;
  display: flex;
}

.no-quotation {
  color: red;
  font-style: italic;
  font-weight: bold;
  margin: auto;
  font-size: 16px;
}

.quotation-detail {
  margin-right: 5px;
}


.infinite-list {
  padding: 3px;
  margin: 1px;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  background: var(--el-color-primary-light-9);
  margin: 2px;
  color: var(--el-color-primary);
  font-size: 17px;
}

.infinite-list .infinite-list-item:hover {
  background-color: #f2f2f2;
  cursor: pointer;
}

</style>